<template>
	<qs-page>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		     <!--isFullScreen 可以实其全屏显示-->
		<ourLoading isFullScreen :active="loadstatus" :text="loadstxt" color="#ffcc00" textColor="#ffcc00"/>
		<view class="u-padding-20 " v-if="!hasLogin" >
			<u-empty text="请先登陆" mode="permission"></u-empty>
		</view>
		
		<view  v-else>
			
	<view v-if="address_is_empty===true" class="empty">
		<navigator url="/pages/order/address/index?source=1" class="address-section bg_light">
			<center>添加地址</center>
		</navigator>
	</view>
	<view v-else>
		<navigator url="/pages/order/address/index?source=1" class="address-section bg_light">
			<view class="order-content">
				<text class="customicon customicon-dizhi" style="width:60px;text-align: center;"></text>
				<view class="cen">
					<view class="top" style="text-align: left;">
						<text class="name">{{addressData.consignee}}</text>
						<text class="mobile">{{addressData.mobile}}</text>
					</view>
					<text class="address" style="text-align: left;">{{addressData.province_name}}{{addressData.city_name}}{{addressData.district_name}}{{addressData.address}}</text>
				</view>
				<text class="customicon customicon-dibudaohanglan-" style="width:50px;text-align: center;"></text>
			</view>
			<image class="a-bg" src=""></image>
		</navigator>
	</view>
			<u-empty text="没有数据" mode="data" :show="goodsList.length === 0" v-if="loadstatus==false"></u-empty>
			<view  class="u-padding-10" v-if="goodsList.length>0">
			
			<view class="g-item b-b" v-for="(item, index) in goodsList" :key="index">
				<u-row gutter="0" justify="space-between">
					<u-col span="2" ><image :src="item.litpic"></image></u-col>
					<u-col span="10" >
						<view class="title clamp">{{item.product_name}}</view>
						<view class="spec" v-if="item.data!=''">{{item.data}}</view>
						<view class="price-box right">
							<text class="price">{{item.spec_price}}</text>
							<text class="number">* {{item.product_num}}</text>
						</view>
					</u-col>
				</u-row>
			</view>

		<!-- 金额明细 -->
		<u-row gutter="0" justify="space-between" class="u-p-t-15 u-p-b-15 u-p-l-30 u-p-r-30  b-b">
			<u-col span="2" >金额</u-col>
			<u-col span="10" text-align="right">
				{{totalmoney}}
			</u-col>
		</u-row>
		<u-row gutter="0" justify="space-between" class="u-p-t-15 u-p-b-15 u-p-l-30 u-p-r-30  b-b">
			<u-col span="2" >运费</u-col>
			<u-col span="10" text-align="right">
				{{shipping_fee}}
			</u-col>
		</u-row>
		<u-row gutter="0" justify="space-between" class="u-p-t-15 u-p-b-15 u-p-l-30 u-p-r-30  b-b">
			<u-col span="2" >备注</u-col>
			<u-col span="10" text-align="left">
				<input class="desc" type="text"  v-model="postscript"  placeholder="请填写备注信息" placeholder-class="placeholder" />
			</u-col>
		</u-row>

		
		<!-- 底部 -->
		<view class="footer ">
			<view class="price-content ">
				<text>实付款</text>
				<text class="price-tip"></text>
				<text class="price">{{realmoney}}</text>
			</view>
			<text class="submit " @click="submit">
				<button type="primary">提交订单</button>
				</text>
		</view>
		



			
			</view>
		</view>





	</qs-page>
</template>


<script>
import {mapState,mapMutations} from 'vuex';
export default {
	data(){
		return {
			goodsList:[],
			hasLogin:false,
			loadStatus: 'loadmore',
			loadstatus:false,
			loadstxt:'loading...',
			address_is_empty:true,
			addressData:[],
				totalmoney:0,
				shipping_fee:'',
				realmoney:0,
				postscript:''
		};
	},
	computed: {
	  ...mapState(['user']),
	},
	 onLoad(){
		this.hasLogin=this.$store.getters.loginFlag;
		this.getpagecontrac();
		
				this.$api('order.address_list', {}).then(res => {
					if (res.code==200){
						console.log(res);
						if(Array.isArray(res.data)){
								this.address_is_empty=false;
								this.addressData=res.data[0];
						}
					}
				}).catch((e)=>{
				});
		
		
		
	},
	watch:{
			//显示空白页
			addressData(e){
				let empty = e == undefined || e.length <= 0 ? true: false;
				if(this.address_is_empty !== empty){
					this.address_is_empty = empty;
				}
			}
	},
	methods: {
			submit(){
				if (this.addressData ==undefined || this.addressData.length == 0){
					this.$api.msg("没有收货地址");return;
				}
				
				if (this.goodsList ==undefined && this.goodsList.length == 0){
					this.$api.msg("订单中没有商品");return;
				}

                return new Promise((resolve, reject) => {
					this.loadstatus=true;
					this.loadstxt="订单提交中";
                    this.$api('shop.order_save', {
						createmode:'car',
						addrid:this.addressData.addr_id,
						postscript:this.postscript,
					}).then(res => {
						console.log(res);
						if (res.code==200){
							 //this.$tools.routerTo('/pages/order/order_view_payment','order_id='+res.data.order_id);
							 this.$Router.push({path:'/pages/order/order_view_payment',query:{order_id:res.data.order_id}});
						}
						this.loadstatus=false;
                    }).catch((e)=>{
						this.loadstatus=false;
					});	
                })
				
			},
		getpagecontrac(){
                return new Promise((resolve, reject) => {
					this.loadstatus=true;
					this.loadstxt="加载中";
                    this.$api('shop.car_list', {}).then(res => {
						console.log(res);
						if (res.code==200){
							this.totalmoney=res.data.totalmoney;
							this.shipping_fee=res.data.shipping_fee;
							this.realmoney=res.data.realmoney;
							this.goodsList=res.data.list;
						}
						this.loadstatus=false;
                    }).catch((e)=>{
						this.loadstatus=false;
					});	
                })
		},
		
	},
};
</script>
<style lang="scss" scoped>

	.address-section {
		padding: 30upx 0;
		position: relative;
		width: 100%;
		text-align: center;
		background: $u-tabbar-top-bg;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $uni-text-color;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $uni-text-color;
		}

		.icon-you {
			font-size: 32upx;
			color: $uni-text-color;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	.g-item {
		position: relative;
		padding: 20rpx;
		image {
			flex-shrink: 0;
			display: block;
			width: 100rpx;
			height: 100rpx;
			border-radius: 4upx;
			margin: 10rpx;
		}
	}

	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 180rpx;
		justify-content: space-between;
		font-size: 30upx;
		z-index: 998;
		box-shadow: 0 -1px 5px rgba(0,0,0,.1);
		padding-bottom: 90rpx;
		padding-top:60upx;

		.price-content{
			padding-left: 30upx;
		}
		.price-tip{
			color: #C40000;
			margin-left: 8upx;
		}
		.price{
			font-size: 36upx;
			color:#C40000;
		}
		.submit{
			display:flex;
			align-items:center;
			justify-content: center;
			width: 300rpx;
			height: 80rpx;
			color: #fff;
			font-size: 32upx;

		}
	}
	
	
</style>
